@charset "UTF-8";

.comn-banner__wrap{
	margin:20px auto 80px;
}

.comn-banner{
	position: relative;
	user-select: none;
}

.comn-banner__bg{
	position: relative;
	width: 100%;
	height: 320px;
	overflow: hidden;
	border-radius: 20px;
}

.comn-banner__bg>img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width:100%;
	height: 100%;
	object-fit: cover;
}

.comn-banner__textbox{
	position: absolute;
	top:80px;
	left: 80px;
	color: var(--color-gray-00);
}

.comn-banner__breadcrumb{
	position: absolute;
	bottom:0;
	right:0;
	padding:20px;
	height: 64px;
	box-sizing: border-box;
	border-radius: 20px 0 0 ;
	background-color: var(--color-gray-00);
}

.comn-banner__breadcrumb:before{
	content:'';
	position: absolute;
	bottom:64px;
	right:0;
	border-radius: 0 0 20px ;
	width:20px;
	height:20px;
	box-shadow: 20px 20px 0 20px var(--color-gray-00);
}

.comn-banner__breadcrumb:after{
	content:'';
	position: absolute;
	bottom:0;
	left:-20px;
	border-radius: 0 0 20px ;
	width:20px;
	height:20px;
	box-shadow: 20px 20px 0 20px var(--color-gray-00);
}

.breadcrumb__grid{
	display: flex;
	align-items: center;
	gap:8px;
}

.breadcrumb__ico{
	width:24px;
	height: 24px;
}

.bo-comn__top{
	margin-bottom: 80px;
}

.bo-comn__top-tit{
	text-align: center;
}

.bo-comn__top-tit>span{
	position: relative;
	display: inline-block;
}

.bo-comn__top-tit>span::before{
	content: '';
	position: absolute;
	top:0;
	right: -16px;
	width: 8px;
	height: 8px;
	background-color: var(--color-primary-50);
	border-radius: 10px;
}

.board-comn__top{
	margin-bottom: 80px;
	text-align: center;
}

.board-comn__top-tit{
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
}

.board-comn__top-tit::before{
	content: '';
	position: absolute;
	top:0;
	right: -16px;
	width: 8px;
	height: 8px;
	background-color: var(--color-primary-50);
	border-radius: 10px;
}

.bo-list__grid-wrap{
	margin-bottom: 120px;
}

.bo-list__grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap:40px 20px;
}

.bo-list__item{
	position: relative;
}

.bo-list__item-img{
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 8px;
	margin-bottom: 12px;
	border: 1px solid var(--color-gray-20);
	box-sizing: border-box;
	overflow: hidden;
}

.bo-list__item-img.category-l{
	aspect-ratio: 1/2;
}

.bo-list__item-img>img{
	position: absolute;
	top:50%;
	left:50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%,-50%);
	transition: transform 0.3s
}

.bo-list__item:hover .bo-list__item-img>img{
	transform: translate(-50%,-50%) scale(1.1)
}

.bo-list__item-img-none{
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	background-color: var(--color-gray-05);
}

.bo-list__item-img.category-l .bo-list__item-img-none{
	aspect-ratio: 1/2;
}


.bo-list__item-img-none .none-txt{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	color: var(--color-gray-70);
}

.bo-list__item-tit{
	max-height: calc(2.8rem * 2);
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: 0.3s
}

.bo-list__item-txt{
	max-height: calc(2.4rem * 2);
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: 0.3s;
	color: var(--color-gray-70);
	margin-top: 8px;
}

.bo-list__item:hover .bo-list__item-tit{
	color: var(--color-primary-50);
}

.bo-list__item-label{
	position: absolute;
	top: 12px;
	left: 12px;
	padding:4px 12px;
	box-sizing: border-box;
	color: var(--color-gray-00);
	background-color: var(--color-primary-50);
	border-radius: 6px;
}

.bo-list__item-none{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200px;
	text-align: center;
	color: var(--color-gray-70);
}

.board__write-wrap{
	text-align: right;
}

.board__write{
	margin-top: 40px;
}

.board__write{
	margin-top: 40px;
}

.board__write-btn{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	padding:0 24px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-gray-90);
	color: var(--color-gray-00);
	transition: 0.3s;
}

.board__write-btn:hover{
	background-color: var(--color-gray-95);
}

.board-v{
	margin-bottom: 120px;
}

.bo-comn-v__top{
	margin-bottom: 40px;
}

.board-v__top{
	text-align: center;
	margin-bottom: 40px;
	padding-bottom: 40px;
	box-shadow: inset 0 -1px 0 0 var(--color-gray-20);
}

.board-v__top-tit{
	margin-bottom: 4px;
}

.board-v__top-txt{
	margin-bottom: 12px;
	color: var(--color-gray-70);
}

.board-v__top-date{
	color: var(--color-gray-70);
}

.board-v__content{
	max-width: 800px;
	margin:0 auto;
}

.board-v__content{
	margin-bottom: 80px;
}

.board-v__btn-wrap{
	display: flex;
	gap:20px;
	justify-content: center
}

.board-v__btn-li{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding:0 32px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-gray-90);
	color: var(--color-gray-00);
	transition: 0.3s;
}

.board-v__btn-li:hover{
	background-color: var(--color-gray-95);
}

.board-v__btn-m{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding:0 32px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-gray-00);
	box-shadow: inset 0 0 0 1px var(--color-gray-20);
	transition: 0.3s;
}

.board-v__btn-m:hover{
	background-color: var(--color-gray-05);
}

.board-v__btn-d{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding:0 32px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-gray-00);
	box-shadow: inset 0 0 0 1px var(--color-gray-20);
	transition: 0.3s;
}

.board-v__btn-d:hover{
	background-color: var(--color-gray-05);
}

.board-w{
	margin:40px auto 120px;
}

.board-w__grid{
	display: flex;
	flex-direction: column;
	gap:20px;
	max-width: 720px;
	margin:0 auto
}

.board-w__form{
	display: flex;
	flex-direction: column;
}

.board-w input{
	max-width: 100%;
	height: 56px;
	padding:0 16px;
	box-sizing : border-box;
	box-shadow: inset 0 0 0 1px var(--color-gray-20);
	border-radius: 6px;
	cursor: pointer;
	transition: 0.3s
}

.board-w textarea{
	width: 100%;
	padding:20px 16px;
	box-sizing : border-box;
	box-shadow: inset 0 0 0 1px var(--color-gray-20);
	border-radius: 6px;
	cursor: pointer;
	transition: 0.3s
}

.board-w__label{
	margin-bottom: 4px
}

.board-w__label.required:after{
	content:'*';
	margin-left: 4px;
	color:var(--color-primary-70)
}

.board-w__file input[type="file"]{
	line-height: 56px;
	background-color: var(--color-gray-00)
}

.board-w__file input[type="file"]::file-selector-button{
	height: 24px;
	font-size: 1.3rem;
	line-height: 1.6rem;
	text-align: center;
	margin:16px 8px 16px 0;
	float: left
}

.board-w__file-del label{
	padding-left: 32px;
	height: 24px;
	display: inline-flex;
	align-items: center;
}

.board-w__btn-wrap{
	display: flex;
	gap:20px;
	justify-content: center;
	margin-top: 60px;
}

.board-w__btn-cancel{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding:0 32px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-gray-40);
	color: var(--color-gray-00);
	transition: 0.3s;

}

.board-w__btn-cancel:hover{
	background-color: var(--color-gray-50);
}

.board-w__btn-submit{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding:0 32px;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: var(--color-primary-50);
	color: var(--color-gray-00);
	transition: 0.3s;
}

.board-w__btn-submit:hover{
	background-color: var(--color-primary-60);
}

.board-comn__top-txt{
	word-break: keep-all;
}

@media all and (max-width:1024px) {
	.board-comn__top{
		margin-bottom: 40px;
	}

	.bo-list__grid{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media all and (max-width:840px) {
	.comn-banner__wrap{
		margin: 0 auto 40px;
	}

	.comn-banner.layout{
		width:100%;
	}

	.comn-banner__bg{
		border-radius: 0;
	}

	.comn-banner__area{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: calc(100% - 32px);
	}

	.comn-banner__textbox{
		position: static;
		text-align: center;
	}

	.comn-banner__breadcrumb{
		position: static;
		background-color: transparent;
		border-radius: 0;
	}

	.comn-banner__breadcrumb::before{
		display: none;
	}

	.comn-banner__breadcrumb::after{
		display: none;
	}

	.breadcrumb__grid{
		justify-content: center;
		color: var(--color-gray-00);
	}

	.board-comn__top{
		margin-bottom: 20px;
	}

	.bo-list__grid-wrap{
		margin-bottom: 80px;
	}

	.bo-list__grid{
		grid-template-columns: repeat(1, 1fr);
	}
}